<template>
	<div class="body">
		<div class="title">
			<p style="margin: 0px;">华赛大数据</p>
		</div>
		<div style="background-color: #F4F4F4;height: 60px;">
			<div class="magnifier" @keyup.13="gotoVipSearchSchool()" @click="gotoVipSearchSchool()" style="display: inline-block;position: absolute;right: 7%;top: 60px;"><i></i></div>
			<input v-model="searchitem" id="input" type="text" placeholder="输入大学名称" />
		</div>
		<div class="firstBox">
			<div>
				<mu-ripple class="mu-ripple-demo" @click="gotoVipSearchSchool()">
					<img src="../../static/images/zhaodaxue.png" style="max-width: 100%;height: 70px;width: auto;" />
				</mu-ripple>
			</div>
			<div style="border-left: 2px solid rgb(243, 243, 243);border-right: 2px solid rgb(243, 243, 243);">
				<mu-ripple class="mu-ripple-demo" @click="gotoVipSelectProfession()">
					<img src="../../static/images/chazhuanye.png" style="max-width: 100%;height:67px;width: auto;" />
				</mu-ripple>
			</div>
			<div>
				<mu-ripple class="mu-ripple-demo">
					<img src="../../static/images/wenzhuanjia.png" style="max-width: 100%;height: 70px;width: auto;" />
				</mu-ripple>
			</div>
		</div>
		<div class="secondTitle">
			<p style="margin: 0px;">按条件选学校</p>
		</div>
		<div class="secondBox">
			<div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','全部','济南','普通','山东','省内')">
						<img class="littleImg" src="../../static/images/shengneibenke.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','专科','全部','济南','普通','山东','省内')">
						<img class="littleImg" src="../../static/images/shengneizhuanke.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','专科','全部','全部','普通','','省外')">
						<img class="littleImg" src="../../static/images/shengwaigaoxiao.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','全部','全部','普通','','')">
						<img class="littleImg" src="../../static/images/zonghelei.png" />
					</mu-ripple>
				</div>
			</div>
			<div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','师范类','全部','普通','','')">
						<img class="littleImg" src="../../static/images/shifanlei.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','医学类','全部','普通','','')">
						<img class="littleImg" src="../../static/images/yixuelei.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','艺术类','全部','普通','','')">
						<img class="littleImg" src="../../static/images/yishulei.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('全部','本科','军警体','全部','普通','','')">
						<img class="littleImg" src="../../static/images/junjingti.png" />
					</mu-ripple>
				</div>
			</div>
		</div>
		<div class="secondTitle">
			<p style="margin: 0px;">按专业形式选学校</p>
		</div>
		<div class="secondBox">
			<div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('公办','本科','普通','全部','校企合作','全部','')">
						<img class="littleImg" src="../../static/images/xiaoqi.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('公办','本科','普通','全部','中外合作','全部','')">
						<img class="littleImg" src="../../static/images/zhongwai.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('公办','专科','普通','全部','3+2连读','全部','')">
						<img class="littleImg" src="../../static/images/3+2liandu.png" />
					</mu-ripple>
				</div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('公办','专科','普通','全部','春考','全部','')">
						<img class="littleImg" src="../../static/images/chunkao.png" />
					</mu-ripple>
				</div>
			</div>
			<div>
				<div>
					<mu-ripple class="mu-ripple-demo-2" @click="gotoVipSchoolList('公办','本科','普通','全部','艺术','全部','')">
						<img class="littleImg" src="../../static/images/yishu.png" />
					</mu-ripple>
				</div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div style="margin-top: 25px;">
			<img src="../../static/images/quanweizhuanjia.png" style="width: 100%;height:auto;" />
		</div>
	</div>
</template>

<script>
	var storage = window.localStorage;
	export default {
		data() {
			return {
				searchitem: null,
			}
		},
		methods: {
			gotoVipSelectProfession() {
				let that = this
				this.$router.push({
					name: 'vip_selectProfession',
				})
			},
			gotoVipSearchSchool() {
				let that = this
				storage.setItem("level", "本科")
				storage.setItem("learnType", "普通")
				storage.setItem("searchitem", this.searchitem)
				this.$router.push({
					name: 'vip_searchSchool',
				})
			},
			gotoVipSchoolList(idNature, idLevel, idCategory, idArea, idLearnType, province, isShandong) {
				let that = this
				storage.setItem("idNature", idNature);
				storage.setItem("idLevel", idLevel);
				storage.setItem("idCategory", idCategory);
				storage.setItem("idArea", idArea);
				storage.setItem("idLearnType", idLearnType);
				storage.setItem("province", province);
				storage.setItem("isShandong", isShandong);
				this.$router.push({
					name: 'vip_schoolList',
				})
			},
		},
	}
</script>

<style scoped="scoped">
	.firstBox {
		display: flex;
		flex-flow: row;
		width: 100%;
		height: 80px;
	}
	
	.secondBox {
		width: 100%;
		height: 140px;
	}
	
	.firstBox>div {
		width: 45%;
	}
	
	.secondBox>div {
		border-bottom: 2px solid rgb(243, 243, 243);
		display: flex;
		flex-flow: row;
		width: 100%;
		height: 70px;
	}
	
	.secondBox>div>div {
		border-left: 1px solid rgb(243, 243, 243);
		border-right: 1px solid rgb(243, 243, 243);
		width: 25%;
		height: 70px;
	}
	
	.littleImg {
		height: 60px;
		width: auto;
	}
	
	.firstBox>div>img {
		max-width: 100%;
		height: 75px;
		width: auto;
	}
	
	#input {
		width: 90%;
		margin-top: 15px;
		border-radius: 4px;
		border: 0px;
		height: 30px;
		padding: 0px 1%;
	}
	
	#input::-webkit-input-placeholder {
		color: #8A8A8A;
	}
	
	.body {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: white;
	}
	
	.title {
		width: 1000px;
		height: 40px;
		overflow: hidden;
		position: relative;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	
	.secondTitle {
		width: 1000px;
		height: 40px;
		font-size: 13px;
		background-color: #F4F4F4;
		overflow: hidden;
		position: relative;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	
	.magnifier {
		width: 15px;
		height: 15px;
		border-radius: 100%;
		border: 1px solid rgb(131, 131, 131);
		position: relative;
	}
	
	.magnifier::after {
		content: "";
		width: 9px;
		height: 1px;
		background-color: rgb(131, 131, 131);
		position: absolute;
		top: 115%;
		left: 79%;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.mu-ripple-demo {
		position: relative;
		width: 100%;
		height: 85px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16px;
		color: #2196f3;
	}
	
	.mu-ripple-demo-2 {
		position: relative;
		width: 100%;
		height: 67px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16px;
		color: #2196f3;
	}
</style>